<!DOCTYPE html>
<html class="no-js" lang="en">
<head>
	<meta charset="utf-8"> 
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
	<meta name="viewport" content="width=500" />
	<meta name="keywords" content="ScrollMagic, example, scrolling, attaching, scrollbar, infinite, dynamic, pages" />
	<meta name="author"	content="Jan Paepke (www.janpaepke.de)" />
	<title>Infinite Scrolling - Examples - ScrollMagic</title>

	<link href='http://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,700,400italic|Josefin+Slab:400,700italic' rel='stylesheet' type='text/css'>
	<link rel="stylesheet" href="../../assets/css/normalize.css" type="text/css">
	<link rel="stylesheet" href="../../assets/css/style.css" type="text/css">
	<link rel="stylesheet" href="../../assets/css/examples.css" type="text/css">
	<link rel="shortcut icon" href="../../assets/img/favicon.ico" type="image/x-icon">

	<script type="text/javascript" src="../../assets/js/lib/jquery.min.js"></script>
	<script type="text/javascript" src="../../assets/js/lib/highlight.pack.js"></script>
	<script type="text/javascript" src="../../assets/js/lib/modernizr.custom.min.js"></script>
	<script type="text/javascript" src="../../assets/js/examples.js"></script>

	<script type="text/javascript" src="../../scrollmagic/uncompressed/ScrollMagic.js"></script>
</head>
<body>
	<ul id="menu"></ul>
	<div id="content-wrapper">
		<div id="example-wrapper">
			<div class="scrollContent">
				<section id="titlechart">
					<div id="description">
						<h1>Infinite Scrolling</h1>
						<h2>Dynamic content pages become scroll magical.</h2>
						<p>An infinite-content page can be achieved by adding a scene that triggers at the bottom of the page.</p>
						<ol>
							<li>On Scene start enter loading state. Save the state to prevent multiple triggers. In this example the class of the #loader element is used.</li>
							<li>Make ajax call to load additional content (if not already in loading state).</li>
							<li>When receiving the ajax "load" event, add the content to your container, update the scene and revert to original state.</li>
						</ol>
						<p>The demo below doesn't really use ajax to ensure offline compatibility. Instead it uses a function to immitate an ajax call to add content.</p>
						<a href="#" class="viewsource">view source</a>
					</div>
				</section>
				<section class="demo dynamicContent">
					<div id="content">
						
					</div>
					<div id="loader">
						<img src="../../assets/img/example_loading.gif">
						LOADING...
					</div>
					<script>
						// init controller
						var controller = new ScrollMagic.Controller();

						// build scene
						var scene = new ScrollMagic.Scene({triggerElement: ".dynamicContent #loader", triggerHook: "onEnter"})
										.addTo(controller)
										.on("enter", function (e) {
											if (!$("#loader").hasClass("active")) {
												$("#loader").addClass("active");
												if (console){
													console.log("loading new items");
												}
												// simulate ajax call to add content using the function below
												setTimeout(addBoxes, 1000, 9);
											}
										});

						// pseudo function to add new content. In real life it would be done through an ajax request.
						function addBoxes (amount) {
							for (i=1; i<=amount; i++) {
								var randomColor = '#'+('00000'+(Math.random()*0xFFFFFF<<0).toString(16)).slice(-6);
								$("<div></div>")
									.addClass("box1")
									.css("background-color", randomColor)
									.appendTo(".dynamicContent #content");
							}
							// "loading" done -> revert to normal state
							scene.update(); // make sure the scene gets the new start position
							$("#loader").removeClass("active");
						}

						// add some boxes to start with.
						addBoxes(18);
					</script>
				</section>
			</div>
		</div>
	</div>
	<script type="text/javascript" src="../../assets/js/tracking.js"></script>
</body>
</html>
